<template>
  <div class="home">
<!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <Header></Header>
    <div style="min-height: 600px">
      <el-container>
        <el-main>
          <Gallery :imageList="imgList"></Gallery>
          <el-pagination style="margin: 0 auto"
            background
            layout="prev, next"
            @prev-click="preClick()"
            @next-click="nextClick()">
          </el-pagination>
        </el-main>
      </el-container>
    </div>
    <Footer></Footer>
<!--    <a href="http://127.0.0.1:8083/images/download/18" about="_blank" download="aa.zip">aa</a>-->
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '../components/Header'
import Gallery from './Gallery'
import Footer from '../components/Footer'
export default {
  name: 'Home',
  components: {
    Footer,
    Gallery,
    Header
  },
  data () {
    return {
      imgList: {}
    }
  },
  methods: {
    getImageList () {
      this.$axios.get('/images').then(response => {
        this.imgList = response.data.data
      })
    },
    preClick () {
      if (this.imgList.hasPreviousPage) {
        const pageNum = this.imgList.pageNum - 1
        this.$axios.get('/images', { params: { pageNum } }).then(response => {
          this.imgList = response.data.data
        })
      }
    },
    nextClick () {
      if (this.imgList.hasNextPage) {
        const pageNum = this.imgList.pageNum + 1
        this.$axios.get('/images', { params: { pageNum } }).then(response => {
          this.imgList = response.data.data
        })
      }
    }
  },
  mounted () {
    console.log('home m')
    this.getImageList()
  }
}
</script>
